<template>
  <div class="foot_box">
    <input type="checkbox" :checked="complete === todoList.length" @click="check_all">
    <span>已完成{{complete}}/ 全部{{todoList.length}}</span>
    <button @click="clear_all">清除全部已完成</button>
  </div>
</template>

<script>
export default {
    name:'MyFooter',
    props:['todoList','clear_done','checkAll'],
    computed:{
      complete(){
        let i = 0;
        this.todoList.map((e)=>{
          if(e.done == true){
            i++
          }
        })
        return i;
      }
    },
    methods:{
      clear_all(){
        this.clear_done()
        
      },
      check_all(even){
        // console.log(even.target.checked)
        this.checkAll(even.target.checked)
      }
    }
}
</script>

<style>
  .foot_box button{
    display: block;
    background-color: aqua;
    margin-left: 198px;
    margin-top: 30px;
    padding: 5px;
    border-radius: 10px;
  }
</style>